<template>
  <div class="AllGoods">
    <div class="container">
      <h2 class="title">热门分类</h2>
      <div class="wrapper" v-for="(item, index) in goodsLists" :key="item.typeName">
        <h5 class="title" style="color: #b0b0b0" :id="'type'+index">{{item.typeName}}</h5>
        <ul class="pro-list">
          <li v-for="item1 in item.child"
              :key="item1.id"
              class="pro-list-item"
              @click="toDetail(item1.id)">
              <a href="javascript:;">
                <div class="item-img">
                  <img v-lazy="item1.coverImg" alt="" />
                </div>
                <div class="info">
                  <div class="item-name">{{ item1.goodsName }}</div>
                  <p class="item-desc">出产地：{{ item1.countryOfOrigin }}</p>
                  <span class="item-price">{{ item1.sellPrice }}元</span>
                </div>
              </a>
              </li>
              <li v-if="(5 - item.child.length%5) !== 5" class="pro-list-item virtual-item" v-for="item1 in (5 - item.child.length%5)" :key="item1"></li>
        </ul>
      </div>
      <el-divider></el-divider>
      <!-- 顶部标题区域 -->
      <h2 class="title">全部商品</h2>
      <!-- 产品列表区域 -->
      <div class="wrapper">
        <!-- 右侧产品列表 -->
        <div class="product">
          <ul class="pro-list">
            <li
              v-for="item in goodsList"
              :key="item.id"
              class="pro-list-item"
              @click="toDetail(item.id)"
            >
              <a href="javascript:;">
                <div class="item-discount">秒杀</div>
                <div class="item-img">
                  <img v-lazy="item.coverImg" alt="" />
                </div>
                <div class="info">
                  <div class="item-name">{{ item.goodsName }}</div>
                  <p class="item-desc">出产地：{{ item.countryOfOrigin }}</p>
                  <span class="item-price">{{ item.sellPrice }}元</span>
                </div>
              </a>
            </li>
            <li class="pro-list-item virtual-item" v-for="(item, index) in (5 - goodsList.length%5)" :key="index"></li>
          </ul>
        </div>
      </div>
    </div>
    <model
      modelType="middle"
      title="添加购物车"
      btnType="1"
      sureText="查看购物车"
      closeText="取消"
      :showModle="isShowModel"
      @closeClick="handelCloseClick"
      @sureClick="handelSureClick"
    >
      <p slot="content">商品添加成功！</p>
    </model>
  </div>
</template>

<script>
import Model from "components/model/Model";
import { mapState } from 'vuex';
export default {
  name: "AllGoods",
  data() {
    return {
      goodsList: [], // 货物列表
      isShowModel: false,
      goodsLists: []
    };
  },
  components: {
    Model,
  },
  computed: {
    ...mapState(['nav'])
  },
  watch: {
    nav (val) {
      if (document.querySelector(`#type${val}`)) {
        document.querySelector(`#type${val}`).scrollIntoView(
          {
            behavior: 'smooth',  // 平滑过渡
            block: 'start'
          }
        )
      } else {
        this.$message({
          type: 'warning',
          message: '该分类下暂无商品'
        })
      }
    }
  },
  mounted() {
    this.getGoodsList();
  },
  methods: {
    /**
     * 去商品详情页
     */
    toDetail (id) {
      this.$router.push("/detail/" + id)
    },
    /**
     * 获取货品列表
     */
    getGoodsList () {
      let query = {
        isSell: 1
      }
      this.$api.shop.getAllGoods(query).then(res => {
        if (res.code === 200) {
          this.goodsList = res.data.records
          let tmp = res.data.records.reduce((total, cur) => {
            if (!total[cur.typeName]) {
              total[cur.typeName] = [cur]
            } else {
              total[cur.typeName].push(cur)
            }
            return total
          }, {})
          for (let i in tmp) {
            this.goodsLists.push({
              typeName: i,
              child: tmp[i]
            })
          }
        }
      })
    },
    addToCart(id) {
      this.isShowModel = true;
    },
    handelCloseClick() {
      this.isShowModel = false;
    },
    handelSureClick() {
      this.isShowModel = false;
      this.$router.push("/cart");
    },
  },
};
</script>
<style scoped>
.AllGoods {
  width: 100%;
  background-color: #f5f5f5;
  margin-top: 30px;
}
.container {
  /* background-color: steelblue; */
  box-sizing: border-box;
  /* height: 740px; */
  padding-bottom: 50px;
}
.title {
  height: 50px;
  line-height: 50px;
  font-size: 22px;
  color: #333;
}
.wrapper {
}
.banner {
  width: 224px;
  height: 620px;
  background-color: teal;
}
.banner a {
  display: block;
  width: 224px;
  height: 620px;
}
.banner a img {
  width: 100%;
  height: 100%;
}

.product {
  box-sizing: border-box;
  overflow: auto;
  height: 620px;
  /* background-color: tomato; */
  padding-left: 16px;
}
.product::-webkit-scrollbar {
width:8px;
height:8px;
}
/*滚动条里面小方块样式*/
.product::-webkit-scrollbar-thumb {
border-radius:100px;
-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
background:gray;
}
/*滚动条里面轨道样式*/
.product::-webkit-scrollbar-track {
-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
border-radius:0;
background:rgba(0,0,0,0.1);
}
.pro-list {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
}
.pro-list-item {
  width: 236px;
  height: 302px;
  background-color: #fff;
}
.virtual-item{
  background-color: transparent;
}
.pro-list-item:nth-child(n + 5) {
  margin-top: 14px;
}
.pro-list-item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
}
.item-discount {
  width: 67px;
  height: 24px;
  background-color: #e82626;
  line-height: 24px;
  text-align: center;
  font-size: 14px;
  color: #fff;
}
.item-img {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 190px;
  height: 160px;
  margin-top: 10px;
}
.item-img img {
  height: 100%;
}
.info {
  display: flex;
  align-items: center;
  flex-direction: column;
  position: absolute;
  bottom: 30px;
}
.item-name {
  font-size: 14px;
  color: #333;
  font-weight: 600;
}
.item-desc {
  font-size: 12px;
  color: #999;
  margin: 4px 0 10px 0;
}
.item-price{
  position: relative;
  font-size: 14px;
  font-weight: 600;
  color: #f20a0a;
  margin: 0 10px;
}
.item-price::after {
  content: "";
  width: 16px;
  height: 12px;
  background: url("/imgs/icon-cart-hover.png") no-repeat;
  position: absolute;
  background-size: 16px;
  top: 3px;
  right: -20px;
}
</style>
